<template>
    <div>
        <div class="card">
            <h2 class="text-lg font-medium text-gray-900 mb-4">样本列表</h2>
            
            <!-- 搜索框 -->
            <div class="mb-6">
                <input
                    v-model="searchQuery"
                    type="text"
                    placeholder="搜索样本..."
                    class="input"
                />
            </div>

            <!-- 加载状态 -->
            <div v-if="loading" class="text-center py-4">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto"></div>
            </div>

            <!-- 样本列表 -->
            <div v-else class="overflow-x-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>文件名</th>
                            <th>类型</th>
                            <th>大小</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="sample in filteredSamples" :key="sample.id">
                            <td>{{ sample.id }}</td>
                            <td>{{ sample.filename }}</td>
                            <td>{{ sample.type }}</td>
                            <td>{{ formatSize(sample.size) }}</td>
                            <td>
                                <span class="badge" :class="getStatusClass(sample.status)">
                                    {{ sample.status }}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const samples = ref([])
const loading = ref(true)
const searchQuery = ref('')

const getStatusClass = (status) => {
    switch (status?.toLowerCase()) {
        case 'safe':
            return 'badge-low'
        case 'suspicious':
            return 'badge-medium'
        case 'malicious':
            return 'badge-high'
        default:
            return 'badge-medium'
    }
}

const formatSize = (size) => {
    if (!size) return '0 B'
    const units = ['B', 'KB', 'MB', 'GB']
    let index = 0
    while (size >= 1024 && index < units.length - 1) {
        size /= 1024
        index++
    }
    return `${size.toFixed(2)} ${units[index]}`
}

const filteredSamples = computed(() => {
    if (!searchQuery.value) return samples.value
    
    const query = searchQuery.value.toLowerCase()
    return samples.value.filter(sample => 
        sample.id.toLowerCase().includes(query) ||
        sample.filename.toLowerCase().includes(query) ||
        sample.type.toLowerCase().includes(query) ||
        sample.status.toLowerCase().includes(query)
    )
})

const fetchSamples = async () => {
    try {
        const response = await fetch('/api/samples')
        const data = await response.json()
        samples.value = data.samples
    } catch (error) {
        console.error('Error fetching samples:', error)
    } finally {
        loading.value = false
    }
}

onMounted(fetchSamples)
</script> 